<template>
  <view class="innerContain">
    <view class="top-content">
      <view class>
        <view class="date1">
          <text
            style=" font-size: 40rpx;font-weight: 600;margin:0 auto;margin-top:10rpx;color:#FFF"
          >膨胀节状态汇总表</text>
        </view>
      </view>
    </view>
    <view class="topradio">
      <view class="top">
        <view v-if="tableone">
          <u-loadmore :status="loadmore" :icon-type="iconType" :load-text="loadText" />
        </view>
        <view v-else>
          <table style border="1" width="100%" cellspacing="0">
            <tr>
              <td colspan="2">单位/部门</td>
              <td colspan="3">{{form1.useUnit }}</td>
              <td colspan="2">日期</td>
              <td colspan="3">{{form1.startTime+'至'+form1.endTime}}</td>
            </tr>
            <tr>
              <td colspan="2">项目名称</td>
              <td colspan="3">{{form1.projectName}}</td>
              <td colspan="2">责任人</td>
              <td colspan="3">{{form1.nickName}}</td>
            </tr>
            <tr>
              <td colspan="2">异常设备数量</td>
              <td colspan="3">{{form.length}}</td>
              <td colspan="2">设备总数量</td>
              <td colspan="3">{{form1.sumNum}}</td>
            </tr>
          </table>
          <u-action-sheet :list="actionSheetList" v-model="selectShow" @click="actionSheetCallback"></u-action-sheet>
          <view @click="selectShow =true">
            <text style="font-size: 40rpx;font-weight:1000;">
              设备情况汇总({{value}})
              <u-icon style="margin-left:10rpx" name="arrow-down-fill"></u-icon>
            </text>
          </view>

          <!-- 表单 -->
          <view v-if="tabletwo">
            <u-loadmore :status="loadmore" :icon-type="iconType" :load-text="loadText" />
          </view>
          <view v-else>
            <table style="border-top: 0px solid;" border="1" width="100%" cellspacing="0">
              <tr></tr>
            </table>


            <table  width="100%" cellspacing="0" >
              <tr>
                <td style="padding:0;border:0px">
                  <table
                    v-for="(item,index) in form"
                    :key="index"
                    style="border-top: 0px solid;"
                    border="1"
                    width="100%"
                    cellspacing="0"
                  >
                    <tr>
                      <td colspan="6" style="padding:0;border:0px">
                        <table border="1" width="100%" frame="void" cellspacing="0" cellpadding="0">
                          <tr>
                            <td colspan="1" style="width:10%" rowspan="6">{{index+1}}</td>
                            <td colspan="4"  class="new">设备名称</td>
                            <td colspan="4" style="width:50%">{{item.name}}</td>
                          </tr>
                          <tr>
                            <td colspan="4" >产品代码</td>
                            <td colspan="5" style="width:50%">{{item.code}}</td>
                          </tr>
                          <tr v-if="item.status =='正常'">
                            <td colspan="4" style="">异常位置</td>
                            <td colspan="5" style="width:50%">无</td>
                          </tr>
                            <tr v-else-if="item.status =='未点检'">
                            <td colspan="4" >异常位置</td>
                            <td colspan="5" style="width:50%">未检查完毕</td>
                          </tr>
                          <tr v-else-if="item.status =='已超时'">
                            <td colspan="4" >异常位置</td>
                            <td colspan="5" style="width:50%">已超时</td>
                          </tr>
                          <tr v-else style="color:red">
                            <td colspan="4" >异常位置</td>
                            <td colspan="5" style="width:50%;border:0px">
                       <table 
                              v-for="(item1,index) in item.errorData "
                              :key="index"
                              border="1"
                              width="100%"
                              frame="void"
                              cellspacing="0"
                              cellpadding="0"
                            >
                              <tr :key="index">
                                <td>{{item1}}</td>
                              </tr>
                            </table>
                            </td> 
                            <!-- <td v-if="item.errorData.length==1">d</td> -->

                            <!-- <td v-for="(item1,index) in item.errorData " :key="index">{{item1}}</td> -->
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createTaskGather } from '@/api/index.js'
export default {
  onLoad(val) {
    this.taskId = val.data
  },
  onShow() {
    this.getList()
    setTimeout(function() {
      var ele = document.querySelectorAll('.orrer')
      var ele1 = document.querySelectorAll('.new')
    }, 500)
  },
  data() {
    return {
      itemList: [
        {
          head: '赏识在于角度的转换',
          body:
            '只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来',
          open: true,
          disabled: true
        },
        {
          head: '生活中不是缺少美，而是缺少发现美的眼睛',
          body:
            '学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美',
          open: false
        },
        {
          head: '周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧',
          body:
            '但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美',
          open: false
        }
      ],
      form1: {},
      taskId: '',
      tableone: false,
      value: '全部',
      type: 'select',
      show: false,
      border: true,
      actionSheetList: [
        {
          text: '正常'
        },
        {
          text: '异常'
        },
        {
          text: '全部'
        }
      ],
      form: [[1, 2]],
      iconType: 'flower',
      show: true,
      selectShow: false,
      loadmore: 'loadmore',
      tabletwo: false,
      loadText: {
        loadmore: '暂无数据',
        loading: '努力加载中',
        nomore: '没有更多数据',
        data: '暂无数据'
      },
      mode: 'date'
    }
  },
  methods: {
    getList() {
      this.tableone = false;
      this.tabletwo = false;
      this.form=[]
      this.form1={}
      console.log(this.value)

      createTaskGather(this.taskId).then(res => {
        if (res.data.deviceGatherVOS) {
          this.tableone = false
          this.form = res.data.deviceGatherVOS
          for (var i = 1; i < this.form.length; i++) {
            this.form.forEach((value, i) => {
              value.downshow = true
            })
          }
          if (this.value == '全部') {
            if (this.form.length == 0) {
              this.tabletwo = true
            }
          } else if (this.value == '正常') {
            console.log(this.form)
            if (this.form.length == 0) {
              this.tabletwo = true
            } else {
              let arr = []
              this.form.forEach(item => {
                if (item.status == '正常') {
                  arr.push(item)
                }
                this.form = { ...arr }
                if (arr.length == 0) {
              this.tabletwo = true
            }
              })
            }
          } else if (this.value == '异常') {
            if (this.form.length == 0) {
              this.tabletwo = true
            } else {
              let arr = []
              this.form.forEach(item => {
                if (item.status == '异常') {
                  arr.push(item)
                }
                this.form = { ...arr }
                if (arr.length == 0) {
              this.tabletwo = true
            }
            console.log(this.form)
              })
            }
          }

          this.form1 = res.data
        } else {
          this.tableone = true
        }
      })
    },
    selectbtn() {
      // console.log(';dssd')
      this.selectShow = true
    },
    actionSheetCallback(index) {
      this.value = this.actionSheetList[index].text
      console.log(this.value)
      this.getList()
    },
    downshow(index) {
      console.log(index)
      let obj = this.form[index]
      obj.downshow = false
      // 深度监听
      this.$set(this.form, index, obj)
      //  this.form[index].downshow = false;
      console.log(this.form)
    }
    // upshow(index) {
    //   console.log(index);
    //   let obj = this.form[index]
    //   obj.downshow = false
    //   // 深度监听
    //   this.$set(this.form, index, obj );
    //   //  this.form[index].downshow = false;
    //   console.log(this.form);
    // }
  }
}
</script>

<style lang="scss" scoped>
td {
  // word-wrap:break-word;
word-break:break-all; 
// word-break:normal; 

}
uni-view {
  font-size: 14px;
}
.vtable {
  text-align: center;
  width: 100%;
  padding: 10rpx 20rpx 20rpx 20rpx;
}
thead {
  th {
    text-align: center;
  }
}
tbody {
  td {
    text-align: center;
  }
}
.flex {
  display: flex;
  justify-content: center;
}
.text-c {
  th {
    width: 400rpx;
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  view {
    width: 30%;
  }
  .span {
    height: 100%;
    border: 1px solid #333;
  }
  .text {
    display: flex;
    view {
      flex: 1;
    }
    uni-input {
      height: 100%;
      border-left: 1px solid;
      border-right: 1px solid;
    }
  }
}
.last {
  display: flex;
  view {
    flex: 1;
  }
}
.vtitle {
  font-weight: 600;
}
image {
  width: 50rpx;
  height: 50rpx;
}
.check {
  border-bottom: 2px solid #333;
  width: 105%;
  margin-right: 20px;
}
.titlechild {
  // background-color:rgb(238, 238, 238)
}
.falseclass {
  color: red;
}
.ttitle {
  font-size: 20px;
  font-weight: 600;
  // position: sticky;
  /* #ifdef H5 */
  // top: 44px;
  /* #endif */
  /* #ifndef H5 */
  // top: 0;
  /* #endif */
  // z-index: 999;
  // flex: 1;
  // flex-direction: column;
  // overflow: hidden;
  // background-color: #FFF;
  // border: 1rpx solid bisque
}
.date {
  z-index: 9999;
  position: absolute;
  top: -80rpx;
  right: 10rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 20rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
}
.ttitle1 {
  position: fixed;
  bottom: 0rpx;
}
.title2 {
  height: calc(100% - 140upx);
}
.k-line {
  display: lnline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  margin-top: 20px;
}
@keyframes k-loadingA {
  50% {
  }
}
.innerContain {
  height: 100%;
  text-align: center;
  position: relative;
  background-color: white;
}
.top-content {
  height: 360upx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.top {
  height: calc(100% - 170rpx);
  margin: 0rpx;
  overflow-y: auto;
  position: absolute;
  background-color: white;
  padding: 50rpx;
  width: 100%;
  // box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  top: 90rpx;
  border-radius: 40rpx 40rpx 0 0;
  .card {
    // background-color: white;
    border: 1px solid #eee;
    padding: 20rpx 20rpx;
    border-radius: 25rpx;
    box-shadow: 0 0 20rpx #eee;
    margin-bottom: 20rpx;
  }
}
/deep/ .uni-view {
  font-size: 0px;
}
.titlechild {
  margin-top: -10rpx;
}
/deep/ .u-line-1 {
  height: 60rpx !important;
}
.border {
  margin-left: 20rpx;
  padding: 4rpx;
  // box-shadow: 0 0 20rpx #eee;
  border: 1px solid white;
  border-radius: 16rpx;
  color: white;
}
/deep/ .video-del {
  display: none;
}
</style>